//导入vue对象
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
//导入get请求
import {getRequest} from "../utils/api";

//导入sockjs
import SockJS from  'sockjs-client';
//导入stomp
import Stomp from 'stompjs';
//消息提醒
import { Notification } from 'element-ui';

//使用
Vue.use(Vuex)

const now = new Date();

const store = new Vuex.Store({
    //定义变量
    state:{
        //这是路由数组，一会从服务器上加载下来的菜单项都放在这个数组里面去,通过下面的mutations来存放
        routes: [], //注意没有“r”
        //聊天新增
        sessions:{}, //这是一个对象
        currentSession: -1, //当前选择的用户 
        currentHr: JSON.parse(window.sessionStorage.getItem("user")),  //当前用户
        filterKey:'',
        hrs: [], //存放用户
        stomp: null,
        isDot: {},
    },
    //修改变量的方法  想当于是java中的setter方法
    mutations:{
        //初始化用户
        INIT_CURRENTHR(state, hr) {
            state.currentHr = hr;
        },
        // 通过该方法放:   
        //  state: 要通过state才可以访问到上面的state变量里面的routes数组  
        //  data：传进来的参数  等下去调用只需要传data参数即可
        initRoutes(state,data){
            state.routes = data;
        },
        //聊天新增
        changeCurrentSession (state,currentSession) {
            //Vue.set( target, key, value )
			//target：要更改的数据源(可以是对象或者数组)
			//key：要更改的具体数据
			//value ：重新赋的值
			//这样做可以在key发生改动的时候页面自动刷新，在这里就是接受消息时页面刷新
            Vue.set(state.isDot, state.currentHr.username + '#' + currentSession.username, false);
			state.currentSession = currentSession;
        },
        //发送消息
		addMessage (state,msg) {
			let mss = state.sessions[state.currentHr.username + '#' + msg.to];
            if (!mss) {               
                Vue.set(state.sessions, state.currentHr.username + '#' + msg.to, []);
            }
            state.sessions[state.currentHr.username + '#' + msg.to].push({
                content: msg.content,
                date: new Date(),
                self: !msg.notSelf
            })
		},
        INIT_DATA (state) {
            //浏览器本地的历史聊天记录可以在这里完成
            let data = localStorage.getItem('vue-chat-session');
            if (data) {
                state.sessions = JSON.parse(data);
            }
        },
        INIT_HR(state, data) {
            state.hrs = data;
        },
    },
    actions:{
        //接收消息
        connect(context) {
            //连接聊天
            context.state.stomp = Stomp.over(new SockJS('/ws/ep'));
            //发起连接  两种回调，成功的回调
            context.state.stomp.connect({}, success => {
            	//注意必须加上/user  之前在服务端自动会添加/user
                context.state.stomp.subscribe('/user/queue/chat', msg => {
                    console.log("hhhhhhhh>>>>>" + msg.body);
                    let receiveMsg = JSON.parse(msg.body);
                    //接受新消息时判断是否为当前聊天对象发送，不是则发送消息提醒
                    //包括没选中任何一人进行聊天时，可以发送提醒消息
                    if (!context.state.currentSession || receiveMsg.from != context.state.currentSession.username) {
                        Notification.info({
                            title: '【' + receiveMsg.fromNickname + '】发来一条消息',
                            message: receiveMsg.content.length > 10 ? receiveMsg.content.substr(0, 10) : receiveMsg.content,
                            position: 'bottom-right'
                        })
                        Vue.set(context.state.isDot, context.state.currentHr.username + '#' + receiveMsg.from, true);
                    }
                    receiveMsg.notSelf = true;
                    receiveMsg.to = receiveMsg.from;
                    context.commit('addMessage', receiveMsg);  
                })
                //失败的回调
            }, error => {

            })
        },
        initData (context) {
            context.commit('INIT_DATA')
            getRequest("/chat/hrs").then(resp => { //请求数据，获取除当前登录的用户
                if (resp) {
                    context.commit('INIT_HR', resp); //赋值
                }
            })
        }
    }
})


store.watch(function (state) {
    return state.sessions
  },function (val) {
    console.log('CHANGE: ', val);
    localStorage.setItem('vue-chat-session', JSON.stringify(val));
  },{
    deep:true/*这个貌似是开启watch监测的判断,官方说明也比较模糊*/
  })
  
  
  export default store;